<template>
    <div>
        <a-card title style="margin-bottom:10px">
            <div>
                <div @click="returnRoute">
                    <icon-arrow-left />
                    <b style="margin-left:5px" v-if="dataForm.lineType % 2 === 0" v-text="'公网线路故障'"></b>
                    <b style="margin-left:5px" v-else v-text="'专线线路故障'"></b>
                </div>
                <div style="margin-left:25%; margin-top: 60px;" v-if="dataForm.lineType === 2">
                    <a-radio-group v-model="dataForm.lineFault">
                        <a-radio :value="true">线路报障</a-radio>
                        <a-radio :value="false">网络咨询</a-radio>
                    </a-radio-group>
                </div>
            </div>
        </a-card>
        <a-card title>
            <div class="form-wrapper" style="margin-left:20%;
            margin-right: 20%;">
                <a-form :model="{}" :label-col-props="{ span: '3' }">
                    <a-form-item
                        v-for="item of formItems"
                        :key="item.key"
                        :label="item.label"
                        required
                    >
                        <template v-if="item.key === 'linkNum'">
                            <a-input
                                :placeholder="item.placeholder"
                                v-model="dataForm.linkNum"
                                disabled
                            />
                        </template>
                        <template v-if="item.key === 'portMsg'">
                            <a-input
                                :placeholder="item.placeholder"
                                v-model="dataForm.portMsg"
                                disabled
                            />
                        </template>
                        <template v-if="item.key === 'faultTime'">
                            <a-date-picker
                                style="width: 220px;"
                                show-time
                                :time-picker-props="{ defaultValue: dayjs('09:09:06', 'HH:mm:ss') }"
                                format="YYYY-MM-DD HH:mm:ss"
                                @change="onChange"
                                @select="onSelect"
                                @ok="onOk"
                            />
                        </template>
                        <template v-if="item.key === 'lightDecrease'">
                            <a-radio-group v-model="dataForm.lightDecrease">
                                <a-radio :value="true">是</a-radio>
                                <a-radio :value="false">否</a-radio>
                            </a-radio-group>
                        </template>
                        <template v-if="item.key === 'responser'">
                            <a-radio-group
                                v-model="findResponser.responserFlag"
                                style="display:inline-block"
                            >
                                <a-radio :value="true">本人</a-radio>
                                <a-radio :value="false">他人</a-radio>
                                <a-input
                                    style="width:150px"
                                    v-model="findResponser.responserSso"
                                    v-if="!findResponser.responserFlag"
                                    :placeholder="'请输入SSO号'"
                                ></a-input>
                            </a-radio-group>
                        </template>
                    </a-form-item>
                </a-form>
            </div>
            <div style="margin:100px 20% 0 20%;">
                <a-button style="margin-left: 70%;">取消</a-button>
                <a-button type="primary" style="margin-left: 30px;">提交</a-button>
            </div>
        </a-card>
    </div>
</template>

<script lang="ts">
import dayjs from 'dayjs';
import { useRouter, useRoute } from "vue-router";
import { FormItem } from '@/types/components'
import { Message } from '@arco-design/web-vue'
import { defineComponent, ref, reactive, watch, onMounted } from 'vue'
import type { Dayjs } from 'dayjs'
export default defineComponent({
    name: 'BaseFormView',

    setup() {
        const router = useRouter();
        const route = useRoute();
        let formItems = reactive([
            {
                label: '线路编号',
                key: 'linkNum',
                required: true,
                type: 'input',
                value: ref(null),
                placeholder: '请输入会议名称',
                validator: function () {
                    if (!this.value.value) {
                        Message.error(this.placeholder || '')
                        return false
                    }
                    return true
                },
            },
            {
                label: '端口信息',
                key: 'portMsg',
                type: 'select',
                placeholder: '端口信息',
                value: ref(''),
                reset: function () {
                    this.value.value = ''
                },
            },
            {
                label: '发生时间',
                key: 'faultTime',
                required: true,
                type: 'select',
                placeholder: '请选择时间',
                value: ref(undefined),
                optionItems: [
                    {
                        label: '普通',
                        value: '0',
                    },
                    {
                        label: '紧急',
                        value: '1',
                    },
                ],
                validator: function () {
                    if (!this.value.value) {
                        Message.error(this.placeholder || '')
                        return false
                    }
                    return true
                },
                reset: function () {
                    this.value.value = undefined
                },
            },
            {
                label: '采集光衰',
                key: 'lightDecrease',
                type: 'switch',
                value: ref(false),
                reset: function () {
                    this.value.value = false
                },
            },

            {
                label: '责任人',
                key: 'responser',
                type: 'switch',
                value: ref(false),
                reset: function () {
                    this.value.value = false
                },
            }, {
                label: '故障现象',
                key: 'fault_url',
                type: 'switch',
                value: ref(false),
                reset: function () {
                    this.value.value = false
                },
            }

        ])
        let dataForm = {
            //lineFault:ref(true)
        };
        // let dataForm = reactive({
        //     lineFault: true,
        //     linkNum: '',
        //     portMsg: '',
        //     faultTime: '',
        //     lightDecrease: false,
        //     responser: '',
        //     faultDescUrl: ''

        // })
        let formItemsTempSource =
            [
                {
                    label: '线路编号',
                    key: 'linkNum',
                    required: true,
                    type: 'input',
                    value: ref(null),
                    placeholder: '请输入会议名称',
                    validator: function () {
                        if (!this.value.value) {
                            Message.error(this.placeholder || '')
                            return false
                        }
                        return true
                    },
                },
                {
                    label: '发生时间',
                    key: 'faultTime',
                    required: true,
                    type: 'select',
                    placeholder: '请选择时间',
                    value: ref(undefined),
                    optionItems: [
                        {
                            label: '普通',
                            value: '0',
                        },
                        {
                            label: '紧急',
                            value: '1',
                        },
                    ],
                    validator: function () {
                        if (!this.value.value) {
                            Message.error(this.placeholder || '')
                            return false
                        }
                        return true
                    },
                    reset: function () {
                        this.value.value = undefined
                    },
                },
                {
                    label: '责任人',
                    key: 'responser',
                    type: 'switch',
                    value: ref(false),
                    reset: function () {
                        this.value.value = false
                    },
                }, {
                    label: '故障现象',
                    key: 'fault_url',
                    type: 'switch',
                    value: ref(false),
                    reset: function () {
                        this.value.value = false
                    },
                }

            ]
        const formItemsSource = [
            {
                label: '线路编号',
                key: 'linkNum',
                required: true,
                type: 'input',
                value: ref(null),
                placeholder: '请输入会议名称',
                validator: function () {
                    if (!this.value.value) {
                        Message.error(this.placeholder || '')
                        return false
                    }
                    return true
                },
            },
            {
                label: '端口信息',
                key: 'portMsg',
                type: 'select',
                placeholder: '端口信息',
                value: ref(''),
                reset: function () {
                    this.value.value = ''
                },
            },
            {
                label: '发生时间',
                key: 'faultTime',
                required: true,
                type: 'select',
                placeholder: '请选择时间',
                value: ref(undefined),
                optionItems: [
                    {
                        label: '普通',
                        value: '0',
                    },
                    {
                        label: '紧急',
                        value: '1',
                    },
                ],
                validator: function () {
                    if (!this.value.value) {
                        Message.error(this.placeholder || '')
                        return false
                    }
                    return true
                },
                reset: function () {
                    this.value.value = undefined
                },
            },
            {
                label: '采集光衰',
                key: 'lightDecrease',
                type: 'switch',
                value: ref(false),
                reset: function () {
                    this.value.value = false
                },
            },

            {
                label: '责任人',
                key: 'responser',
                type: 'switch',
                value: ref(false),
                reset: function () {
                    this.value.value = false
                },
            }, {
                label: '故障现象',
                key: 'fault_url',
                type: 'switch',
                value: ref(false),
                reset: function () {
                    this.value.value = false
                },
            }

        ]
        const getParams = () => {
            dataForm = reactive(JSON.parse(route.params.data))
            if (dataForm.lineType % 2) {//调为false,但是不会渲染 为什么呢
                dataForm.lineFault = false
            }
            console.log('666')
            console.log(dataForm)

        }
        getParams()
        let findResponser = reactive({
            responserFlag: true,
            responserSso: ''
        })
        //写一个接口对象，interface 所有的内容字段现在此定义 然后绑定


        //    watch(dataForm, (newVal,oldVal) => {

        //        console.log("tm"+dataForm.lineFault)
        //        console.log(newVal)
        //         console.log(oldVal)
        //     if(newVal.lineFault!=oldVal.lineFault){//保证有变化
        //     console.log('进入了watch的最外层if中')
        //         if(newVal.lineFault){//新 加入数组

        //         }else{ //从数组中搞出去
        //         console.log('进入了watch的else')
        //          formItems=formItems.slice(0,1)
        //          formItems=formItems.slice(1,1)
        //         }
        //     }

        // })
        watch(() => dataForm.lineFault, (newVal, oldVal) => {
            if (newVal != oldVal) {//保证有变化
                console.log('3')
                if (newVal) {//新 加入数组
                    console.log('1')
                    // formItems[]
                    //    for(let i=1;i<=2;i++){
                    //      formItems.push({})
                    //  }
                    for (let i = 0; i < formItemsSource.length; i++) {
                        formItems[i] = formItemsSource[i]
                    }
                } else { //从数组中搞出去
                    for (let i = 1; i <= 2; i++) {
                        formItems.pop()
                    }

                    for (let i = 0; i < formItemsTempSource.length; i++) {
                        formItems[i] = formItemsTempSource[i]
                    }


                }
                console.log('mmm')
                console.log(formItems)
            }

        }, { immediate: true })


        // watch(dataForm.lineFault, (newVal, oldVal) => {
        //     console.log('667')
        //     console.log(newVal)
        //     console.log(oldVal)
        // },{deep:true})
        const submitLoading = ref(false)
        function submit() {
            if (formItems.every((it) => (it.validator ? it.validator() : true))) {
                submitLoading.value = true
                setTimeout(() => {
                    submitLoading.value = false
                    Message.success(
                        '提交成功，参数为：' +
                        JSON.stringify(
                            formItems.reduce((pre, cur) => {
                                ; (pre as any)[cur.key] = (cur as any).value.value
                                return pre
                            }, {})
                        )
                    )
                }, 3000)
            }
        }
        function onSelect(dateString: any, date: any) {
            console.log('onSelect', dateString, date);
        }

        function onChange(dateString: any, date: any) {
            console.log('onChange: ', dateString, date);
            dataForm.faultTime = dateString
        }

        function onOk(dateString: any, date: any) {
            console.log('onOk: ', dateString, date);
        }
        function resetForm() {
            formItems.forEach((it) => {
                it.reset ? it.reset() : (it.value.value = '')
            })
        }
        function valideForm() {
            if (formItems.every((it) => (it.validator ? it.validator() : true))) {
                Message.success('所有表单都合法')
            }
        }
        function returnRoute() {
            router.go(-1)
        }
        //  onMounted(getParams)
        return {
            dataForm,
            formItems,
            submitLoading,
            submit,
            resetForm,
            valideForm,
            onSelect,
            onChange,
            onOk,
            dayjs,
            findResponser,
            getParams,
            formItemsSource,
            formItemsTempSource,
            returnRoute
        }
    },
})
</script>
